<template>
  <view>
    <view :class="['btn-item', { active: isSelected }]" @click="handleClick">
      <text class="btn-text">{{ title }}</text>
      <text class="btn-price">{{ price }}</text>
      <view v-if="props.icon == false">
        <image src="@/static/My/diamond.png" class="diamond" v-if="!isSelected"></image>
        <image src="@/static/My/diamonds.png" class="diamond" v-if="isSelected"></image>
      </view>
      <view v-if="props.icon == true">
        <image src="@/static/My/VIP/VIP.png" class="diamond" v-if="!isSelected"></image>
        <image src="@/static/My/VIP/VIPColor.png" class="diamond" v-if="isSelected"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{
  title: string
  price: string
  isSelected: boolean
  icon: boolean
}>()

console.log(props.icon, 'icon')

const emits = defineEmits<{
  (e: 'update:selected', title: string): void
}>()

const handleClick = () => {
  emits('update:selected', props.title)
}
</script>

<style scoped>
.btn-item {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 18vh;
  height: 18vh;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.19);
  margin-top: 5vh;
}

.diamond {
  width: 7vw;
  height: 7vw;
  position: absolute;
  right: 0;
  bottom: 0;
}

.btn-text {
  border-bottom: 1px solid rgb(234, 234, 234);
  width: 100%;
  text-align: center;
  height: 5vh;
  line-height: 5vh;
  font-size: 2vh;
}

.btn-price {
  width: 100%;
  text-align: center;
  padding-top: 20%;
  height: 50%;
  vertical-align: middle;
  color: red;
  font-size: 2.5vh;
}

.active {
  background-color: rgb(229, 246, 248);
  color: rgb(0, 170, 191);
}
</style>
